<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
	xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/layui/css/layui.css">
<link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
	
	<div class="panel panel-default operation1" hidden>
		<div class="panel-heading title"></div>
		<div class="layui-card-body">
			<form class="layui-form " action="" lay-filter="info" style="margin-top: 10px">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
					<legend>调查问卷信息</legend>
				</fieldset>
				
				<div class="layui-form-item">
					<label class="layui-form-label">标题</label>
					<div class="layui-input-inline">
						<input id="viewTitle" readonly="true" autocomplete="off" class="layui-input">
					</div>
				</div>
				
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
					<legend>问卷问题内容</legend>
				</fieldset>
				
				<div id="viewSurvey"></div>
				
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn layui-btn-primary btn_cancel">返回</button>
					</div>
				</div>
				
			</form>
		</div>
	</div>
	
	
	<div class="table_div">
		<div id="searchParam" shiro:hasPermission="tssq:survey:list">
			<div class="layui-form-item">
				<div class="layui-input-inline">
					<input type="text" id="key" class="layui-input" autocomplete="off"
						placeholder="请输入">
				</div>

				<div class="layui-input-inline ">
					<button class="layui-btn" onclick="search()" id="search">查询</button>
				</div>
			</div>

		</div>
		<table class="layui-table" id="showTable" lay-filter="showTable"></table>
	</div>
	
	<div class="table_div1" hidden>
		<div id="searchParam">
			<div class="layui-form-item">
				<div class="layui-input-inline">
					<input type="text" id="qzmc" class="layui-input" autocomplete="off"
						placeholder="请输入群组名称">
				</div>
				
				<input id="surveyId" hidden>
				
				<div class="layui-input-inline">
					<button class="layui-btn" onclick="search1()" id="search">查询</button>
					<button class="layui-btn layui-btn-primary btn_cancel">返回</button>
					
				</div>
			</div>

		</div>
		<table class="layui-table" id="showTable1" lay-filter="showTable1"></table>
	</div>
	
	
	<script type="text/html" id="tool">
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="view1">选择群组</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="view">查看</a>
	</script>
	
	<script type="text/html" id="tool1">
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="send">发送</a>
	</script>
</body>
</html>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script>
	//获取token
	var token = CoreUtil.getData("access_token");
	//地址栏转义token中的#号
	var tokenQuery = token.replace("#", "%23");
	var tableIns;
	var tableIns1;
	var table = layui.table;
	var form = layui.form;
	var layer = layui.layer;
	var $ = jQuery = layui.jquery;
	var laydate = layui.laydate;
	var _xh = 0;
	var _surveyArr = new Array();
	
	layui.use([ 'table', 'layer', 'laydate' ], function() {
		
		//日期
		laydate.render({
		    elem: '#date'
		});
		
		//加载table
		tableIns = table.render({
			elem : '#showTable',
			contentType : 'application/json',
			headers : {
				"authorization" : token
			},
			page : true //开启分页
			,
			url : '/tssq/survey/list' //数据接口
			,
			method : 'POST',
			parseData : function(res) { //将原始数据解析成 table 组件所规定的数据
				return {
					"code" : res.code, //解析接口状态
					"msg" : res.msg, //解析提示文本
					"count" : CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
					"data" : CoreUtil.isEmpty(res.data) ? null
							: res.data.records
					//解析数据列表
				}
			},
			cols : [ [ {
				align : 'center',
				width : 290,
				field : 'id',
				title : '问卷编号',
				sort : true
			}, {
				align : 'center',
				width : 530,
				field : 'title',
				title : '问卷标题',
				sort : true
			}, {
				align : 'center',
				width : 190,
				field : 'createTime',
				title : '问卷创建日期',
				sort : true
			}, {
				align : 'center',
				width : 185,
				toolbar : "#tool",
				fixed : 'right',
				title : '操作'
			} ] ],
			
			toolbar : '#toolbar'
		});
		
		//表头工具
		table.on('toolbar(showTable)', function(obj) {
			switch (obj.event) {
			
			}
			;
		});
		//列操作
		table.on('tool(showTable)', function(obj) {
			var data = obj.data;
			switch (obj.event) {
				case 'view':
					$(".table_div").hide();
					$(".table_div1").hide();
					$(".operation1").show();
					var contentSurveyJson = eval("(" + data.content + ")");
					$("#viewTitle").val(data.title);
					var viewSurveyTmp = "";
					for(var i = 0; i < contentSurveyJson.length; i++){
						var _optionsType = contentSurveyJson[i].optionsType;
						var _optionsTitle = contentSurveyJson[i].optionsTitle;
						viewSurveyTmp += "<div class='layui-form-item'>";
						if(_optionsType == "1"){
							// 文本
							viewSurveyTmp += "<label class='layui-form-label'>"+_optionsTitle+"</label>"
						    	+"<div class='layui-input-block'>"
						    	+"<input type='text' placeholder='请输入' autocomplete='off' class='layui-input'>"
						    	+"</div>";
						}else if(_optionsType == "2"){
							// 多选
							viewSurveyTmp += "<label class='layui-form-label'>"+_optionsTitle+"</label>"
										 +"<div class='layui-input-block'>";
							var _options = contentSurveyJson[i].options;
							for (var _i in _options) { 
							// for(var _i = 0; _i < _options.length; _i++){
								viewSurveyTmp += "<input type='checkbox' name="+_options[_i][0]+" title="+_options[_i][0]+">"
											  + "<div class='layui-unselect layui-form-checkbox'><span>"+_options[_i][0]+"</span><i class='layui-icon layui-icon-ok'></i></div>";
							}
						    
							viewSurveyTmp += "</div>";
					    		
						}else if(_optionsType == "3"){
							// 单选
							viewSurveyTmp += "<label class='layui-form-label'>"+_optionsTitle+"</label>"
							 			+"<div class='layui-input-block'>";
							var _options = contentSurveyJson[i].options;
							for (var _i in _options) {
								viewSurveyTmp += "<input type='radio' name='like[write]' value="+_options[_i][0]+" title="+_options[_i][0]+">"
											 + "<div class='layui-unselect layui-form-radio'><i class='layui-anim layui-icon'>o</i><div>"+_options[_i][0]+"</div></div>"
							}
							viewSurveyTmp += "</div>";
						}
						viewSurveyTmp += "</div>";
					}
					
					$("#viewSurvey").html(viewSurveyTmp);
				break;
					
				case 'view1':
					$(".table_div").hide();
					$(".table_div1").show();
					$(".operation1").hide();
					$("#surveyId").val(data.id);
					
					var createId = data.createId;
					search1(createId);
					
				break;
			}
		});
		
		//加载grouptable
        tableIns1 = table.render({
            elem: '#showTable1'
            , contentType: 'application/json'
            , headers: {"authorization": token}
            , page: true //开启分页
            , url: '/tssq/group/list' //数据接口
            , method: 'POST'
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
                    "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
                }
            }
            , cols: [
                [
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'qzId',align : 'center', title: '群组编号', sort: true},
                    {field: 'qzmc',align : 'center', title: '群组名称', sort: true},
                    {field: 'type',align : 'center', title: '群组类型', templet : function(row) {
						if (row.type == "1") {
							return "普通群组";
						} else if (row.type == "2") {
							return "系统群组";
						} else if (row.type == "3") {
							return "自定义群组";
						} else{
							return "未知："+row.type;
						}
						
					},sort: true},
                    {field: 'yxbz',align : 'center', title: '有效标志', sort: true},
                    {field: 'zfbz',align : 'center', title: '作废标志', sort: true},
                    {align : 'center',toolbar: "#tool1", title: '操作'}
                ]
            ]
            , toolbar: '#toolbar1'
        });
		
      //列操作
		table.on('tool(showTable1)', function(obj) {
			var data = obj.data;
			switch (obj.event) {
				case 'send':
					
					layer.open({
		                content: "确定要发送调查问卷么?",
		                yes: function (index, layero) {
		                    layer.close(index); //如果设定了yes回调，需进行手工关闭
		                    
		                    
		                    var qzId = data.qzId;
							var surveyId = $("#surveyId").val();
							var map = {
								qzId :qzId,
								surveyId :surveyId
							};
		                    
							layer.msg(
				        			"操作成功！稍后请在【调查问卷列表】模块查询推送结果！",
				        			{icon : 1, time : 2000},
				        			function() {// msg消失之后触发的函数
				        				$(".table_div").show();
				        				$(".table_div1").hide();
				        				$(".operation1").hide();
				        				search();
				        			}
				        			
				        	);
							
							CoreUtil.sendPost("/tssq/send/enterprisewechat", map, function (res) {
		                        if(res.code == "0"){
		                        	layer.msg(res.msg);
		                        	
		                        }else{
		                        	layer.msg(res.msg);
		                        	
		                        }
		                        
		                    });
							
		                }
		            });
					
				break;
			}
		});
		
		
		//返回
		$(".btn_cancel").click(function() {
			$(".table_div").show();
			$(".table_div1").hide();
			$(".operation1").hide();
			return false;
		});

	});

	//执行查询
	function search() {
		//这里以搜索为例
		tableIns.reload({
			where : { //设定异步数据接口的额外参数，任意设
				title : $("#key").val()
			},
			page : {
				curr : 1
				//重新从第 1 页开始
			}
		});
	};
	
	
	//执行查询
	function search1(userId) {
		//这里以搜索为例
		tableIns1.reload({
			where : { //设定异步数据接口的额外参数，任意设
				qzmc : $("#qzmc").val(),
				userId : userId
			},
			page : {
				curr : 1
				//重新从第 1 页开始
			}
		});
	};
	
	
	// 增加文本框
	function addSurveyContent_1(){

		var surveyOptionsArr = new Array();
		surveyOptionsArr["options"] = new Array();
		_surveyArr[_xh] = surveyOptionsArr;
		_surveyArr[_xh]['optionsType'] = "1";
		
		// var xh = _xh;
		var xh = _surveyArr.length - 1;
		var tmp = "";
		tmp += "<div id='wj_"+xh+"'>"
			+ "<div class='layui-form-item'>"
			+ "<label class='layui-form-label'>文本问题</label>"
			+ "<div class='layui-input-inline'>"
			+ "<input onkeyup='javascript:insertArry(this, "+xh+");' id='wjnrId_"+xh+"' name='wjnrName' placeholder='请输入问题' autocomplete='off' class='layui-input'>"
			+ "<a style='cursor:pointer' onclick='deleteOptions("+xh+")'>删除</a>"
			+ "</div>"
			+ "</div>"
			+ "</div>";
			
		_xh ++;
		
		$("#_addSurveyContent").after(tmp);
		
	}
	
	// 增加多选框
	function addSurveyContent_2(){
		var surveyOptionsArr = new Array();
		surveyOptionsArr["options"] = new Array();
		_surveyArr[_xh] = surveyOptionsArr;
		_surveyArr[_xh]['optionsType'] = "2";
		
		// var xh = _xh;
		var xh = _surveyArr.length - 1;
		var tmp = "";
		tmp += "<div id='wj_"+xh+"'>"
			+ "<div class='layui-form-item'>"
			+ "<label class='layui-form-label'>多选问题</label>"
			+ "<div class='layui-input-inline'>"
			+ "<input onkeyup='javascript:insertArry(this, "+xh+");' id='wjnrId_"+xh+"' name='wjnrName' placeholder='请输入问题' autocomplete='off' class='layui-input'>"
			+ "<a style='cursor:pointer' onclick='deleteOptions("+xh+")'>删除</a>"
			+ "</div>"
			// + "<label class='layui-form-label'></label>"
			+ "<div class='layui-input-inline'>"
			+ "<div class='layui-btn layui-btn-danger layui-btn-xs' onclick='addWjnrxx("+xh+")'>增加多选</div>"
			+ "</div>"
			+ "<div class='layui-form-item'>"
			+ "<label id='options_"+xh+"' style='line-height: 60px' class='layui-form-label'>选项</label>"
			+ "</div>"
			+ "</div>"
			+ "</div>";
		_xh ++;
		
		$("#_addSurveyContent").after(tmp);
		
	}
	
	// 增加单选框
	function addSurveyContent_3(){
		var surveyOptionsArr = new Array();
		surveyOptionsArr["options"] = new Array();
		_surveyArr[_xh] = surveyOptionsArr;
		_surveyArr[_xh]['optionsType'] = "3";
		
		// var xh = _xh;
		var xh = _surveyArr.length - 1;
		var tmp = "";
		tmp += "<div id='wj_"+xh+"'>"
			+ "<div class='layui-form-item'>"
			+ "<label class='layui-form-label'>单选问题</label>"
			+ "<div class='layui-input-inline'>"
			+ "<input onkeyup='javascript:insertArry(this, "+xh+");' id='wjnrId_"+xh+"' name='wjnrName' placeholder='请输入问题' autocomplete='off' class='layui-input'>"
			+ "<a style='cursor:pointer' onclick='deleteOptions("+xh+")'>删除</a>"
			+ "</div>"
			// + "<label class='layui-form-label'></label>"
			+ "<div class='layui-input-inline'>"
			+ "<div class='layui-btn layui-btn-danger layui-btn-xs' onclick='addWjnrxx("+xh+")'>增加单选</div>"
			+ "</div>"
			+ "<div class='layui-form-item'>"
			+ "<label id='options_"+xh+"' style='line-height: 60px' class='layui-form-label'>选项</label>"
			+ "</div>"
			+ "</div>"
			+ "</div>";
		_xh ++;
		
		$("#_addSurveyContent").after(tmp);
		
	}
	
	function addWjnrxx(xh){
		var tmp = "";
		var _surveyOptionsArr = _surveyArr[xh];
		var _wjnrxxArry = new Array();
		
		if(_surveyOptionsArr.options.length >= 8){
			layer.msg("调查问卷内容选择框最多新增八条");
			return false;
		};
		
		var _optionsArr = _surveyOptionsArr["options"];
		_optionsArr.push(_wjnrxxArry);
		
		var _xxxh = _optionsArr.length - 1;
		tmp += "<div class='layui-input-inline' id='optionsDiv_"+xh+"_"+_xxxh+"'>"
			+ "<input onkeyup='javascript:insertArry1(this, "+xh+", "+_xxxh+");' id='wjnrxxId_"+xh+"' name='wjnrxxName' placeholder='请输入选项' autocomplete='off' class='layui-input'>"
			+ "<a style='cursor:pointer' onclick='deleteoptions("+_xxxh+","+xh+")'>删除</a>"
			+ "</div>";
		
		$("#options_"+xh+"").after(tmp);
	}
	
	function deleteOptions(xh){
		 _surveyArr.splice(xh,1);
		
		$("#wj_"+xh+"").remove();
		// _xh --;
	}
	
	function deleteoptions(xxxh,xh){
		var _surveyOptionsArry = _surveyArr[xh];
		var _optionsArry = _surveyOptionsArry["options"]
		_optionsArry.splice(xxxh,1);
		$("#optionsDiv_"+xh+"_"+xxxh+"").remove();
	}
	
	function insertArry(obj, xh){
		// console.log("_surveyArrXh："+xh);
		// 在数据组记录
		var _surveyContentArr = _surveyArr[xh];
		_surveyContentArr["optionsTitle"] = obj.value;
		
	}
	
	function insertArry1(obj, xh, xxxh){
		// console.log("_surveyArrXh："+xh + ";xxxh：" + xxxh);
		// 在数据组记录
		var _surveyOptionsArr = _surveyArr[xh];
		var _wjnrxxArry = _surveyOptionsArr['options'];
		var xxxhArr = new Array();
		xxxhArr.push(obj.value);
		_wjnrxxArry[xxxh] = xxxhArr;
		
	}
	
	
</script>